<script setup>
import { ref, watch } from 'vue';
// 开发黑马面面 搜索功能  很多搜索条件 任意一个搜索条件变化都需要调接口刷新 用deep比较合适
// 其他一般都使用精确监听即可

const info = ref({
  name: '韩',
  age: 20
})

const changeAge = () => {
  info.value.age ++
}
const changeName = () => {
  info.value.name = '小小韩'
}
watch(() => info.value.age, () => {
  console.log('age变化了');
})
</script>

<template>
  <div class="app-page">
    {{ info.name }} -- {{ info.age }}
    <button @click="changeAge">age++</button>
    <button @click="changeName">改名字</button>
  </div>
</template>

<style scoped></style>
